<template>
  <div class="c">
    <div
      style="display: flex; justify-content: center"
      v-if="shoolObj.frist_image "
    > 
        <el-radio-button :value="false" v-if="shoolObj.frist_image"
          >首课图片</el-radio-button
        > 
        
    </div>

    <div v-if="shoolObj.frist_image"  >
      <el-image
            :z-index="99999999"
            :preview-teleported="true"
            style="width: 100%; height: 200px;margin-top:10px"
            :src="shoolObj.frist_image"  
            @click="imageShows(shoolObj)"
          ></el-image>
    </div>
    <div class="h5_school_details">
      <el-form :inline="true" :model="shoolObj" ref="rulesForm">
        <el-form-item label="省：" prop="province" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.province }}</span>
        </el-form-item>
        <el-form-item label="市：" prop="municipality" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.municipality }}</span>
        </el-form-item>
        <el-form-item label="区：" prop="region" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.region }}</span>
        </el-form-item>
        <el-form-item
          label="所属机构："
          prop="institution"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.institution }}</span>
        </el-form-item>
        <el-form-item
          label="学校名称："
          prop="school_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.school_name }}</span>
        </el-form-item>
        <el-form-item label="班级：" prop="calss" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.calss }}</span>
        </el-form-item>
        <el-form-item label="科目：" prop="subject" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.subject }}</span>
        </el-form-item>
        <el-form-item label="课程：" prop="course" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.course }}</span>
        </el-form-item>
        <el-form-item
          label="课节次名称："
          prop="class_session_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.class_session_name }}</span>
        </el-form-item>
        <el-form-item
          label="上课日期："
          prop="calss_time"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.calss_time }}</span>
        </el-form-item>
        <el-form-item
          label="上课时间："
          prop="calss_time_last"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.calss_time_last }}</span>
        </el-form-item>
        <el-form-item
          label="下课时间："
          prop="calss_time_slot"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.calss_time_slot }}</span>
        </el-form-item>
        <el-form-item
          label="授课模式："
          prop="teaching_mode"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.teaching_mode }}</span>
        </el-form-item>
        <el-form-item
          label="上课志愿者："
          prop="volunteer_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.volunteer_name }}</span>
        </el-form-item>
        <el-form-item
          label="在地教师："
          prop="local_teachers"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.local_teachers }}</span>
        </el-form-item>
        <el-form-item
          label="课节状态："
          prop="class_session_status"
          class="el-form-itemse"
        >
          <el-tag type="primary" v-if="shoolObj.class_session_status == '1'"
            >正常</el-tag
          >
          <el-tag type="danger" v-if="shoolObj.class_session_status == '2'">异常</el-tag>
        </el-form-item>
        <el-form-item
          label="异常原因："
          prop="abnormal_cause"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.abnormal_cause }}</span>
        </el-form-item>
        <el-form-item label="课程会议链接：" prop="link" class="el-form-itemse">
          <a :href="shoolObj.link" style="color: blue" target="_blank">
            <el-button type="primary">观看课程</el-button>
          </a>
        </el-form-item>
        <el-form-item label="课程会议号：" prop="code" class="el-form-itemse">
          <span class="el-input_shool">{{ shoolObj.code }}</span>
        </el-form-item>
        <!-- <el-form-item
          label="督课人员："
          prop="staff_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.staff_name }}</span>
        </el-form-item> -->
        <el-form-item
          label="在地区域负责人："
          prop="zdquser_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.zdquser_name }}</span>
        </el-form-item>
        <el-form-item
          label="在地工作人员："
          prop="user_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.user_name }}</span>
        </el-form-item>
        <el-form-item
          label="督课人员："
          prop="zxguser_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.zxguser_name }}</span>
        </el-form-item>
        <el-form-item
          label="代课人员："
          prop="duser_name"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.duser_name }}</span>
        </el-form-item>
        <el-form-item label="是否代课：" prop="status" class="el-form-itemse">
          <el-tag type="primary" v-if="shoolObj.is_daike == '1'"
            >正常上课</el-tag
          >
          <el-tag type="danger" v-else-if="shoolObj.is_daike == '2'">代课</el-tag>
          <span v-else>无</span>
        </el-form-item>
        <el-form-item label="代课原因：" prop="daike_remarks" class="el-form-itemse" v-if="shoolObj.is_daike != '1'">
          <span class="el-input_shool">{{ shoolObj.daike_remarks||'无' }}</span>
        </el-form-item> 
        <el-form-item
          label="志愿者是否正常入会：" 
          prop="volunteer_stauts"
          class="el-form-itemse"
        >
          <el-tag type="primary" v-if="shoolObj.volunteer_stauts == '1'"
            >正常</el-tag
          >
          <el-tag type="danger" v-else-if="shoolObj.volunteer_stauts == '2'">异常</el-tag>
          <span v-else>无</span>

        </el-form-item>
        <el-form-item
          label="在地老师是否入会："
          prop="local_teachers_status"
          class="el-form-itemse"
        >
          <el-tag type="primary" v-if="shoolObj.local_teachers_status == '1'"
            >正常</el-tag
          >
          <el-tag type="danger" v-else-if="shoolObj.local_teachers_status == '2'">异常</el-tag>
          <span v-else>无</span>

        </el-form-item>
        <el-form-item label="是否暂停：" prop="is_pause" class="el-form-itemse">
          <el-tag type="primary" v-if="shoolObj.is_pause == '1'">未暂停</el-tag>
          <el-tag type="danger" v-else-if="shoolObj.is_pause == '2'">暂停</el-tag>
          <span v-else>无</span>

        </el-form-item>
        <el-form-item label="是否外出：" prop="is_pause" class="el-form-itemse">
          <el-tag type="primary" v-if="shoolObj.is_waichu == '1'">正常</el-tag>
          <el-tag type="danger" v-if="shoolObj.is_waichu == '2'">外出</el-tag>
          <span v-else>无</span>

        </el-form-item>
        <el-form-item label="是否首课：" prop="is_image"   class="el-form-itemse">
           
           <span  v-if="is_image==1">是</span>
           <span v-else>否</span>
 
         </el-form-item>
        <el-form-item label="首课图片：" prop="frist_image" v-if="!frist_image" class="el-form-itemse">
           
          <span  >无</span>

        </el-form-item>
        
        <!-- <el-form-item label="外出原因：" prop="zremarks" class="el-form-itemse">
      <span class="el-input_shool">{{ shoolObj.zremarks||'暂无' }}</span>
    </el-form-item> -->
        <el-form-item
          label="暂停原因："
          prop="pause_remarks"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{
            shoolObj.pause_remarks || "暂无"
          }}</span>
        </el-form-item>
        <el-form-item
          label="线上人员备注："
          prop="remarks"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.remarks || "暂无" }}</span>
        </el-form-item>
        <el-form-item
          label="在地人员备注："
          prop="zremarks"
          class="el-form-itemse"
        >
          <span class="el-input_shool">{{ shoolObj.zremarks || "暂无" }}</span>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div style="height: 10vh"></div> -->
    <div style="height: 15vh" v-if="authority([3, 4, 5])"></div>

    <BottomAdd v-if="authority([3,4,5]) ">
      <!-- 在地区域负责人 -->
      <div class="boxs_bov_buttons" v-if="authority([3])||user?.is_qstatus==2">
        <el-button
          @click="zjduke()"
          
          plain
          style="width: 100%; height: 40px"
          >转交督课</el-button
        >
        <el-button
          @click="zjdaike()"
          type="primary"
          plain
          style="width: 100%; height: 40px"
          >转交代课</el-button
        >
        <el-button
          @click="bj()"
          type="primary"
          style="width: 100%; height: 40px"
          >编辑</el-button
        >
        <el-button
          style="width: 100%; height: 40px"
          type="danger"
          @click="deletes"
          >删除</el-button
        >
      </div>
      <div class="boxs_bov_buttons">
         
         <el-button
           @click="duketx()"
           type="primary"
           style="width: 100%; height: 40px"
           v-if="authority([5])&&(user.id===shoolObj.zxguser_id)"
           >{{authority([5])? '督课信息填写':'在地编辑'}}</el-button
         > 
         <el-button
         @click="shokesedit(shoolObj)"
           style="width: 100%; height: 40px"
           v-if="authority([5])&& shoolObj.is_image == 1"
           >首课上传</el-button
         > 
         <el-button
         v-if="authority([4])"
           @click="waic()" 
           :type="shoolObj.is_waichu=='1'?'':'danger'"
           :disabled="shoolObj.is_waichu=='2'"
           style="width: 100%; height: 40px"
           >{{shoolObj.is_waichu=='1'?'选择外出':'当前外出'}}</el-button
         >
       </div>
    </BottomAdd>
    
  
    <div v-if="authority([3])||user?.is_qstatus==2">
      <!-- 在在线管理员操作 -->
      <AddModuleGoodsType ref="addModuleShool" @refreshData="refreshData">
      </AddModuleGoodsType>

      <!-- 代课 -->
      <addModuleShoolDk
        ref="addModuleShoolDk"
        @refreshData="refreshData"
      ></addModuleShoolDk>
      <!-- 督课 -->
      <addModuleShoolDuke
        ref="addModuleShoolDuke"
        @refreshData="refreshData"
      ></addModuleShoolDuke>
      <!-- 督课填写 -->
      

    </div>
    <div v-if="authority([4,5])">
      <Dukexx ref="addModuleFlag" @callFather="refreshData" /></div>

  </div>
  <el-dialog v-model=" imagsShow" :destroy-on-close="true">
        <img  style="width: 100%;" :src=" imageUrl" alt="Preview Image" />
      </el-dialog>
    <shoke ref="shokeModuleFlag" @getData="refreshData" ></shoke>

</template>
  
  <script>
import { timetableEdit, timetableDel, statuss, schewaichu } from "@/api/api";
import { setStorage, getStorage } from "@/utils/util";
import BottomAdd from "@/components/bottom_add.vue";
import addModuleShoolDk from "./components/daikeAdd.vue";//转交代课
import addModuleShoolDuke from "./components/dukeAdd.vue"; //转交督课
import AddModuleGoodsType from "./components/add.vue"; //编辑
import Dukexx from "./components/dukexx.vue";
import shoke from "./components/shoke.vue";


//   import addModuleShool from "./components/addShool.vue"; //在地和在地区域的新增
//   import DiaoLogShool from "./components/diaologShool.vue";
export default {
  components: {
    BottomAdd,
    addModuleShoolDk,
    addModuleShoolDuke,
    AddModuleGoodsType,
    Dukexx,
    shoke
  },
  data() {
    return {
      imagsShow:false,
      imageUrl:'',
      imageShows(row){
      this.imagsShow=true;
      this.imageUrl=row.frist_image;
    },
      user:{},
      id: this.$route.query.id,
      shoolObj: {},
      isCollapse: false,
      userInfo: "", //用户权限id
    };
  },
  watch: {
    
    isCollapse(val) {
      this.pausevideo();
    },
  },
  mounted(o) {
    // //console.log(o,'----------o')
    this.ShoolDatails();
  },
  created(o) {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
    // this.ShoolDatails();
  },
  methods: {
    shokesedit(row){
      // 首课上传
      this.$refs.shokeModuleFlag.addPlan(row);
    },
    waic(val) {
      let vm = this;
      vm.$confirm("是否确认外出?", "外出确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return schewaichu({ ids: vm.shoolObj.id }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg); 
            vm.ShoolDatails();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    duketx(){
      // 督课填写
      this.$refs.addModuleFlag.addModuleFn(this.shoolObj, `${this.authority([4])?'在地督课':'督课信息'}`, []);

    }, 
    bj(){
      this.$refs.addModuleShool.addModuleFn(this.shoolObj, "编辑", this.GroupList); 
    },
    deletes(){
      // 删除
      let vm = this;
        vm.$confirm("您确定要删除该督课吗？", {
          closeOnClickModal: false,
        })
          .then((res) => {
            timetableDel({ id: this.shoolObj.id }).then((res) => {
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.$router.go(-1);
              } else {
                vm.$message.warning(res.msg);
              }
            });
          })
          .catch(() => {});
    },
    // 转交督课
    zjduke(){
      this.$refs.addModuleShoolDuke.addModuleFn(this.shoolObj, "督课转交");

    },
    zjdaike(){
      this.$refs.addModuleShoolDk.addModuleFn(this.shoolObj, "代课转交");
      
    },
    refreshData(){
      this.ShoolDatails()
    },
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    // 获取基础学校数据
    ShoolDatails() {
      timetableEdit({ id: this.id }).then((res) => {
        this.user={...res.data.user}
        delete res.data.user
        this.shoolObj = res.data; 
        //console.log(this.user,'----this.user')
        
      });
    },
  },
};
</script>
  
  <style>
.el-form-itemse {
  min-width: 40%;
}
.h5_school_details {
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
</style>